<template>
  <div class="form-preview-group" :style="{ height: styleHeight }">
    <ShopView v-if="!isOpenServiceMall" :part-list="partList" />
    <ShopViewV2 v-else :color="color" :part-list="partList" />
  </div>
</template>

<script>
import { previewProps } from '@src/mform/components/props';
import { findComponentUpward } from '@src/util/assist';
import ShopView from '@src/mform/components/FormShop/components/shopView.vue';
import ShopViewV2 from '@src/mform/components/FormShop/components/shopViewV2.vue';

export default {
  name: 'mform-shop-preview',
  props: previewProps,
  data() {
    return {};
  },
  components: {
    ShopView,
    ShopViewV2, // 新版本商城
  },
  computed: {
    formDesignComponent() {
      return findComponentUpward(this, 'mform-design');
    },
    formPreviewComponent() {
      return findComponentUpward(this, 'mform-preview');
    },
    styleHeight() {
      return `${this.formPreviewComponent.$el.offsetHeight}px` || '658px';
    },
    partList() {
      return (
        this.formDesignComponent?.partList ||
        this.formPreviewComponent?.partList ||
        []
      );
    },
    isOpenServiceMall() {
      return (
        this.formDesignComponent?.isOpenServiceMall ??
        this.formPreviewComponent?.isOpenServiceMall
      );
    },
    color() {
      return (
        this.formDesignComponent?.themeColour.split(',')[0] ||
        this.formPreviewComponent?.themeColour.split(',')[0] ||
        ''
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.form-preview-group {
  padding: 0;
  width: 100%;
  background-color: #ffffff;
}
</style>
